<template>
  <div class="tabs">
    <vab-card class="tabs-card" shadow="hover">
      <el-tabs
        v-model="activeName"
        highlight-current-row
        @tab-click="tabChange"
      >
        <el-tab-pane label="规则明细" name="detail">
          <el-table :data="state.ruleDetail" height="280" style="width: 100%">
            <el-table-column label="级次" prop="ruleIndex" width="300" />
            <el-table-column label="数据源类型" prop="sourceName" width="600" />
            <el-table-column label="格式" prop="sourceFormat" />
            <template #empty>
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="规则分配列表" name="fp">
          <el-table :data="state.ruleFp" height="280" style="width: 100%">
            <el-table-column type="index" width="150" />
            <el-table-column label="分配类型" prop="refTypeName" width="180" />
            <el-table-column label="编码" prop="refCode" width="300" />
            <el-table-column label="名称" prop="refName" width="300" />
            <el-table-column label="创建人" prop="createUser" width="300" />
            <el-table-column label="创建时间" prop="createTime" />
            <template #empty>
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </vab-card>
  </div>
</template>

<script setup>
  import {
    getBarcodeRuleFpApi,
    getBarcodeRuleDetailApi,
  } from '@/api/kc/barcode_rule'
  const activeName = ref('detail')
  const state = reactive({
    currentRow: {},
    ruleDetail: [],
    ruleFp: [],
  })

  const getRow = (row) => {
    state.currentRow = row
    let nowTab = activeName._value
    tabChange(nowTab, '')
  }
  const tabChange = (tab, value) => {
    let currentTab = ''
    if (value) {
      currentTab = tab.props.name
    } else {
      currentTab = tab
    }
    switch (currentTab) {
      case 'detail':
        state.ruleDetail = []
        getBarcodeRuleDetail()
        break
      case 'fp':
        state.ruleFp = []
        getBarcodeRuleFp()
        break
    }
  }
  const getBarcodeRuleDetail = async () => {
    let params = {
      pkBarcodeRuleH: state.currentRow.pkBarcodeRuleH,
    }
    const { code, data } = await getBarcodeRuleDetailApi(params)
    if (2000 === code) {
      state.ruleDetail = data
    }
  }

  const getBarcodeRuleFp = async () => {
    let params = {
      pkBarcodeRuleH: state.currentRow.pkBarcodeRuleH,
    }
    const { code, data } = await getBarcodeRuleFpApi(params)
    if (2000 === code) {
      state.ruleFp = data
    }
  }

  defineExpose({ getRow })
</script>

<style lang="scss" scoped>
  :deep() {
    .el-card {
      height: 383px !important;
    }
  }
  :deep() {
    .el-table__body tr.current-row > td {
      background-color: #c9e7ff;
    }
  }
</style>
